<template>
  <a-modal
    :visible="visible"
    :title="current ? '编辑' : '新增'"
    okText="确认"
    cancelText="取消"
    @ok="handleOk"
    @cancel="handleCancel"
    :destroyOnClose="true"
    :maskClosable="false"
    width="600px"
  >
    <a-form :form="form" layout="horizontal" :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }">
      <a-form-item label="角色" class="compact-form-item">
        <a-select
          v-decorator="[
            'role',
            {
              rules: [{ required: true, message: '请选择角色' }],
              initialValue: current ? current.role.id : undefined
            }
          ]"
          placeholder="请选择角色"
        >
          <a-select-option v-for="item in roleOptionList" :key="item.value" :value="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="页面导航">
        <a-select
          v-decorator="[
            'nav',
            {
              rules: [{ required: true, message: '请选择页面导航' }],
              initialValue: current ? current.nav.id : undefined
            }
          ]"
          placeholder="请选择页面导航"
        >
          <a-select-option v-for="item in navOptionList" :key="item.value" :value="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="操作权限">
        <a-select
          v-decorator="[
            'actionIds',
            {
              rules: [{ required: true, message: '请选择操作权限' }],
              initialValue: current ? current.action_list.map(item => item.id) : []
            }
          ]"
          mode="multiple"
          placeholder="请选择操作权限"
        >
          <a-select-option v-for="item in actionOptionList" :key="item.value" :value="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
export default {
  name: 'AddModal',
  props: {
    visible: Boolean,
    roleOptionList: Array,
    navOptionList: Array,
    actionOptionList: Array,
    current: Object
  },
  data () {
    return {
      form: this.$form.createForm(this)
    }
  },
  watch: {
    current (val) {
      if (val) {
        this.$nextTick(() => {
          this.form.setFieldsValue({
            role: val.role.id,
            nav: val.nav.id,
            action_list: val.action_list.map(item => item.id)
          })
        })
      }
    }
  },
  methods: {
    handleOk () {
      this.form.validateFields((err, values) => {
        if (!err) {
          if (this.current) {
            values.id = this.current.id // 如果是编辑，需要传id
          }
          this.$emit('ok', values)
        }
      })
    },
    handleCancel () {
      this.form.resetFields()
      this.$emit('cancel')
    }
  }
}
</script>

<style scoped>
.compact-form-item {
  margin-bottom: 16px;
}

:deep(.ant-form-item-label) {
  line-height: 32px;
}

:deep(.ant-select) {
  width: 100%;
}

:deep(.ant-form-item-control) {
  line-height: 32px;
}
</style>
